<!-- 列表页 -->
<template>
  <div class='detailsList'>
    <!-- {{$nuxt.$route.path}} -->
    <!-- 内容列表 -->
    <div class="items" v-for="(item, i) in Allitem" :key="i">
      <!-- 标题 -->
      <nuxt-link :to="`/content/${item._id}`" class="title"> {{item.title}} </nuxt-link>
      <!-- 文字 -->
      <div class="content" v-html="content[i]"></div>
      <!-- 图片 -->
      <img :src="item.cover" alt="">
      <!-- 数据 -->
      <div class="browse">
        <!-- 文章的类型 -->
        <div class="left">
          <span class="icon">
            {{item.category}}
          </span>
        </div>
        <!-- 观看，评论、点赞 -->
        <div class="right">
          <span> 
            <v-icon> mdi-chat </v-icon>
            12
          </span>
          <span>
            <v-icon> mdi-eye </v-icon>
            33
          </span>
          <span>
            <v-icon> mdi-pinwheel </v-icon>
            2111
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  computed: {
    routePath: function() {
      return $nuxt.$route.path;
    }
  },
  async asyncData({ $axios }) {
    const { data } = await $axios.get('/articles/AllList');
    let dd = data.map(item => {
      return item.content.split(/<\/?[a-zA-Z]+(\s+[a-zA-Z]+=".*")*>/g);
    }).map(value => {
      return value[2];
    })
    
    return {
      Allitem: data,
      content: dd
    };
  }
}
</script>

<style lang='scss' scoped>
.detailsList {
  // 列表卡片
  .items {
    padding: .5rem .3rem .3rem;
    margin-top: .3rem;
    background: #fff;
    letter-spacing: .05rem;
    border-radius: .1rem;
    // 标题
    .title {
      display: inline-block;
      margin-bottom: .3rem;
      font-size: 15px;
      font-weight: 400;
    }
    // 文章内容
    .content {
      display: -webkit-box;
      height: 1rem;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-height: 18px;
      color: #858585;
    }
    img {
      width: 100%;
      margin-top: .5rem;
      border-radius: .1rem;
    }
    // 观看，点赞、留言
    .browse {
      display: flex;
      margin-top: .3rem;
      .left {
        flex: 3;
        .icon {
          padding: 2px 3px;
          background: rgb(223, 223, 223);
          color: rgb(90, 89, 89);
          border-radius: .05rem;
          letter-spacing: .02rem;
        }
      }
      .right {
        flex: 4;
        display: flex;
        flex-direction: row-reverse;
        span {
          color: rgb(163, 163, 163);
          margin-left: 0.27rem;
          .v-icon.v-icon {
            font-size: .4rem;
            color: rgb(163, 163, 163);
          }
        }
      }
    }
  }
  .items:nth-child(1) {
    margin-top: 0rem;
  }
}
</style>